<template>
  <div class="page page__operationlog">
    <div
      v-loading="entryloading"
      class="page__content"
    >
      <div class="jepaas-userInfo">
        <div class="left-box">
          <div class="info-item">
            <div class="basicinfo">
              <!-- <span class="name">{{ userInfo.userName }}</span> -->
              <span
                v-if="userInfo.licenseType == 'commercial'"
                class="lightword"
                style="color: #C2AC5D"
              >
                <i
                  style="color: #FCB81D;margin-right: 5px"
                  class="jeicon jeicon-vip-v"
                />
                商业版证书</span>
              <span
                v-else-if="userInfo.licenseType == 'develop'"
                class="lightword"
                style="color: #A392C4"
              ><i
                style="margin-right: 5px"
                class="jeicon jeicon-v"
              />开发版证书</span>
              <span
                v-else
                class="lightword"
                style="color: #91D37B"
              >
                <i class="jeicon jeicon-v" />
                未知证书</span>
              <span class="zsnumber">{{ userInfo.verifyUniqueCode }}</span>
            </div>
          </div>
          <div
            class="info-item info-config"
            style="margin-top: 10px"
          >
            <span>可建表数：{{ returnName(userInfo.tableNum) }}</span>
            <span>可建功能数：{{ returnName(userInfo.funNum) }}</span>
            <span>可建流程数：{{ returnName(userInfo.processNum) }}</span>
            <span>使用人数：{{ returnName(userInfo.userNum) }}</span>
            <span>使用机器数：{{ returnName(userInfo.machineNum) }}</span>
          </div>
          <div
            class="info-item info-config"
            style="margin-top: 10px"
          >
            <span>顶部显示字样：{{ returnName(userInfo.topInfo) }}</span>
          </div>
          <div class="info-item info-config">
            <span>数据加载字样：{{ returnName(userInfo.loadInfo) }}</span>
          </div>
          <div class="info-item info-config">
            <span>公司信息字样：{{ returnName(userInfo.companyInfo) }}</span>
          </div>
          <!-- <div class="info-item info-time">
            <span>授权申请信息：{{ userInfo.applicant }} {{ returnName(userInfo.creatTime) }}</span>
            <span>审核时间：{{ returnName(userInfo.verifyTime) }}</span>
          </div> -->
          <div class="info-item">
            <span class="info-machines">
              已解锁的增强组件
              <span
                @click="openModules"
                style="color: #4094ED;cursor: pointer"
              >
                {{ unloackPlugins.length }}
              </span>
              个
            </span>
            <!-- <span>
              <el-button
                @click="openDetail"
                type="text"
              >查看详情</el-button>
            </span> -->
          </div>
        </div>
        <div class="right-box">
          <div class="tips">
            <i class="fe icon-right-hand-1 shanIcon" />
            <span
              @click="goWebsite"
              style="cursor: pointer"
            >请前往商城，选购更多爆款产品！！！</span>
          </div>
          <div class="btns">
            <el-button
              @click="buyZs"
              size="small"
              type="danger"
            >
              购买证书
            </el-button>
            <el-button
              @click="lineAuth('在线授权')"
              size="small"
              type="info"
              plain
            >
              在线授权
            </el-button>
            <el-button
              @click="lineAuth('离线授权')"
              size="small"
              type="info"
              plain
            >
              离线授权
            </el-button>
          </div>
        </div>
      </div>
    </div>

    <div
      v-loading="slideloading"
      v-if="imageData && imageData.length"
      class="page__content"
      style="padding:0px;height: 200px"
    >
      <div class="page__image">
        <el-carousel
          ref="jecarousel"
          :autoplay="false"
          height="200px"
        >
          <div
            v-for="(item, index) in imageData"
            :key="index"
            @click="goSlideLink(item)"
            style="cursor: pointer"
          >
            <el-carousel-item :name="index">
              <img :src="item.fileKey">
            </el-carousel-item>
          </div>
        </el-carousel>
      </div>
    </div>

    <div
      v-loading="entryloading"
      class="page__content"
    >
      <p class="content_title">
        快捷入口
      </p>
      <div class="list entry_list clearBoth">
        <div
          v-for="(entry, index) in entryList"
          :key="index"
          @click="showFunc(entry)"
          class="entry_items pointer"
        >
          <div class="icon_wrp">
            <i :class="`${entry.iconCls}`" />
          </div>
          <p>{{ entry.text }}</p>
        </div>
      </div>
    </div>
    <div
      class="page__content"
      style="padding: 25px 20px;"
    >
      <p class="content_title">
        平台数据
      </p>
      <div
        v-loading="entryloading"
        class="list count_list clearBoth"
      >
        <div
          v-for="(count, index) in countList"
          :key="index"
          class="count_items"
        >
          <div class="item_wrp">
            <p class="count">
              {{ count.value }}
            </p>
            <p class="label">
              {{ count.label }}
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="page__content pb0">
      <p class="content_title">
        开发者操作日志
      </p>
      <div class="dev_oper_dialog clearBoth">
        <div class="developer">
          <div class="clearBoth">
            <div
              v-show="!searchInput"
              @click="showList = !showList"
              class="left title"
            >
              <i class="jeicon jeicon-sort-small-down" />
              开发者
            </div>
            <div
              v-show="searchInput"
              class="left title"
              style="width: 100%;padding-right: 20px"
            >
              <input
                ref="userInput"
                v-model="user_input"
                type="text"
                class="user_input"
                placeholder="请输入人名"
              >
              <i
                @click="user_input = ''"
                class="jeicon jeicon-error-circle"
                style="color: #D2D2D2;"
              />
            </div>
            <!-- <div class="right title">
              <i
                v-show="!searchInput"
                @click="searchInput = !searchInput"
                class="jeicon jeicon-search pointer" style="font-size: 12px;">
              </i>
              <span v-show="searchInput" style="cursor: pointer;color: #D2D2D2;" @click="searchInput = !searchInput">取消</span>
            </div> -->
          </div>
          <div class="item_wrps">
            <div
              v-for="(item, index) in retrievalList"
              :key="index"
              @click="handleUser(item)"
              class="clearBoth dev_items pointer"
            >
              <span
                v-if="getUserPhoto(item.id)"
                v-html="getUserPhoto(item.id)"
                class="left"
              />
              <p :class="`left name ${item.id === activeUser ? 'active' : ''}`">
                {{ item.text }}
              </p>
            </div>
          </div>
        </div>
        <div
          v-loading="logloading"
          class="oper_detail"
        >
          <p class="detail_title">
            操作日志详情
          </p>
          <div class="detail_content">
            <img
              v-if="detailList.length < 1"
              src="./assets/img/nodata.png"
              style="display: block;margin: 120px auto;opacity: .4"
            >
            <div
              v-else
              v-for="(item, index) in detailList"
              :key="index"
              class="detail_items clearBoth"
            >
              <span
                v-if="getUserPhoto(item.DEVELOPLOG_USERID)"
                v-html="getUserPhoto(item.DEVELOPLOG_USERID)"
                class="left"
              />
              <span class="left">{{ item.DEVELOPLOG_USERNAME }}</span>
              <span class="left">{{ item.SY_CREATETIME }}</span>
              <span class="left">
                {{ item.DEVELOPLOG_ACT_NAME }}了【{{ item.DEVELOPLOG_TYPE_NAME }}】
                <span v-if="item.DEVELOPLOG_NAME">{{ item.DEVELOPLOG_NAME }}</span>
              </span>
            </div>
          </div>
          <page-bar
            ref="pagebar"
            :page-size="pageSize"
            :total-count="totalCount"
            :initPage="nowPage"
            @load="getLog"
          />
        </div>
      </div>
    </div>
    <UnlockCmp
      ref="modulesDialog"
      :tableData="unloackPlugins"
    />
    <!-- <LoginDialog
      ref="loginDialog"
      @getUserInfo="getUserInfo"
    /> -->
    <JepaasAuthorization
      ref="authDialog"
    />
  </div>
</template>

<script>
// import Cookies from 'js-cookie';
import { getAuthInfo } from './actions/api';
import { getMenuInfo, getDevelopUsers, loadDevelopUserLog } from './actions/api';
// import LoginDialog from './components/loginDialog';
import { asyncComponent } from '../../components/asyncComponent/index';

const PageBar = asyncComponent(() => import('../../components/listview/pagebar.vue'));
const JepaasAuthorization = asyncComponent(() => import('./components/authorization'));
const UnlockCmp = asyncComponent(() => import('./components/unlockCmp'));

export default {
  name: 'OperationLog',
  components: { PageBar, UnlockCmp, JepaasAuthorization },
  data() {
    return {
      logloading: false,
      entryloading: false,
      slideloading: false,
      searchInput: true,
      showList: true,
      user_input: '',
      entryList: [],
      countList: [
        {
          value: '',
          label: '资源表',
          color: '#FF7043',
          code: 'SYS_TABLE',
        },
        {
          value: '',
          label: '菜单',
          color: '#FF9800',
          code: 'SYS_MENU',
        },
        {
          value: '',
          label: '功能',
          color: '#FF7043',
          code: 'FUNCCFG_SUBSYSTEM',
        },
        {
          value: '',
          label: '数据字典',
          color: '#CDDC39',
          code: 'JE_CORE_DICTIONARY',

        },
        {
          value: '',
          label: '工作流',
          color: '#26C6DA',
          code: 'JE_CORE_PROCESSINFO',
        },
        {
          value: '',
          label: '图报表',
          color: '#039BE5',
          code: 'JE_CORE_CHARTS',
        },
        {
          value: '',
          label: '定时任务',
          color: '#AB47BC',
          code: 'JE_SYS_TIMEDTASK',
        },
      ],
      developerList: [],
      detailList: [],
      totalCount: 0,
      pageSize: 10,
      activeUser: '',
      retrievalList: [],
      params: {},
      nowPage: 1,
      allUser: [],
      imageData: [],
      userInfo: {},
      hasLogin: false,
      unloackPlugins: [],
    };
  },
  watch: {
    showList: {
      handler(nv) {
        if (!nv) {
          this.$nextTick(() => {
            document.querySelectorAll('.item_wrps')[0].className = 'item_wrps h0';
          });
        } else {
          this.$nextTick(() => {
            document.querySelectorAll('.item_wrps')[0].className = 'item_wrps';
          });
        }
      },
      deep: true,
      immediate: true,
    },
    user_input: {
      handler(nv) {
        if (nv) {
          this.$nextTick(() => {
            const list = this.developerList.filter(item => item.text.indexOf(nv) > -1);
            this.retrievalList = list;
          });
        } else {
          this.$nextTick(() => {
            this.retrievalList = JSON.parse(JSON.stringify(this.developerList));
          });
        }
      },
      immediate: true,
    },
  },
  created() {
    this.params = {
      userId: this.activeUser,
      start: 0,
      limit: this.pageSize,
    };
    /* // 如果存在token  则调获取用户信息接口
    const user = this.getToken();
    if (JE.isNotEmpty(user)) {
      // 如果是当前用户 并且有网站登录token
      if (user.userId == JE.USER.id && user.token) {
        this.hasLogin = true; // 已登录
        // 从本地获取 获取用户信息
        const userInfo = JSON.parse(localStorage.getItem('jepaas_website_userInfo'));
        this.userInfo = userInfo;
      }
    } */
    this.getAuthBasicInfo();
  },
  mounted() {
    JE.systemConfig.JE_OPERATIONLOG_IMG != '0' && this.getSlides();
    this.getMenu();
    // 人员头像处理
    const me = this;
    if (!JE.isNotEmpty(JE.__USERS__)) {
      $(document).on('mysubscrible', () => {
        me.photoPath = JE.getUserPhoto(JE.USER.userId, true);
        me.getLog();
        me.getUser();
      });
    } else {
      me.photoPath = JE.getUserPhoto(JE.USER.userId, true);
      me.getLog();
      me.getUser();
    }
  },
  methods: {
    // 弹出jepaas 网站登录弹窗
    doLogin() {
      this.$refs.loginDialog.loginVisible = true;
    },
    // 弹出解锁组件 弹窗
    openModules() {
      this.$refs.modulesDialog.moduleVisible = true;
    },
    // 获取广告轮播图
    getSlides() {
      const that = this;
      that.slideloading = true;

      JE.ajax({
        url: '/je/sysConfig/sysMode/getProductInfo',
        async: true,
        closeError: true,
        success(data) {
          that.slideloading = false;
          if (JE.isNotEmpty(data.responseText)) {
            const { rows } = Ext.decode(data.responseText);
            if (rows && rows.length > 1) {
              rows.forEach((item) => {
                item.fileKey = item.GGGL_TP.split('*')[1];
              });
              that.imageData = rows;
            } else {
              that.imageData = [];
            }
          }
        },
      });
    },
    // 跳转广告链接
    goSlideLink(item) {
      if (!item.GGGL_GGLJ) {
        return;
      }
      window.open(item.GGGL_GGLJ);
    },
    // 获取用户信息
    /* getUserInfo(info) {
       getAuthInfo().then((data) => {
        this.hasLogin = true; // 已登录
        if (data.success) {
          this.userInfo = Object.assign(info, data.obj);
        } else {
          this.userInfo = info;
        }
        // 登录后  把用户信息存入本地
        localStorage.setItem('jepaas_website_userInfo', JSON.stringify(this.userInfo));
      });
    }, */
    // 获取授权基本信息
    getAuthBasicInfo() {
      getAuthInfo().then((data) => {
        if (!data.success) {
          return JE.msg('获取授权信息失败');
        }
        this.userInfo = data.obj;
        const allPlugins = data.obj && data.obj.plugin && JSON.parse(data.obj.plugin).p || [];
        const unlockArr = data.obj && data.obj.keys && JSON.parse(data.obj.keys) || [];
        if (unlockArr) {
          unlockArr.forEach((item) => {
            item.name = item.c;
            item.date = item.d;
            for (let i = 0; i < allPlugins.length; i++) {
              const em = allPlugins[i];
              if (item.a == em.a) {
                item.version = em.e;
                break;
              }
            }
          });
          this.unloackPlugins = unlockArr;
        }
      });
    },
    // 获取平台登录用户ID 和 网站登录token
    getToken() {
      const idtoken = JE.getCookies('websiteJepaasAuthorization');
      const id = idtoken && idtoken.split('_')[0];
      const token = idtoken && idtoken.split('_')[1];
      return { userId: id, token };
    },
    // 查看详情
    openDetail() {
      window.open('http://jepaas.com/certificateShow'); // 跳转网站使用详情页面
    },
    // 前往网站
    goWebsite() {
      window.open('http://jepaas.com/shop');
    },
    // 购买证书
    buyZs() {
      window.open('http://jepaas.com/shop/jepaas-syzs-0004.html');
    },
    // 授权
    lineAuth(type) {
      this.$refs.authDialog.dialogTitle = type;
      this.$refs.authDialog.authorizeDialog = true;
    },
    returnName(item) {
      if (!item) {
        return '未知';
      }
      if (item == '-1') {
        return '不限';
      }
      return item;
    },
    showFunc(item) {
      // openFuncById如果没有权限会返回false，如果有则返回空并进行跳转
      if (!JE._MENUS[item.id]) {
        return JE.alert('您没有操作此功能的权限');
      }
      JE.openFuncById(item.id);
    },
    getUserPhoto(id) {
      return JE.getUserPhoto(id, true);
    },
    handleUser(item) {
      if (item.id === this.activeUser) {
        this.activeUser = '';
      } else {
        this.activeUser = item.id;
      }
      this.params.userId = this.activeUser;
      if (this.$refs.pagebar.page === 1) {
        this.getLog();
      } else {
        this.$refs.pagebar.firstPage();
      }
      // this.$refs.pagebar.firstPage();
      // this.getLog();
    },
    getMenu() {
      this.entryloading = true;
      getMenuInfo().then((rows) => {
        for (let i = rows.menu.length - 1; i >= 0; i--) {
          if (rows.menu[i] && (rows.menu[i].code == 'JE_CORE_DOCUMENT' || rows.menu[i].text == '文档管理')) {
            rows.menu.splice(i, 1);
          }
        }
        this.entryList = rows.menu;
        for (let i = 0, len = this.countList.length; i < len; i++) {
          if (this.countList[i].code === rows.menuNum[i].code) {
            this.countList[i].value = rows.menuNum[i].num;
          }
        }
        this.entryloading = false;
      });
    },
    getUser() {
      getDevelopUsers().then((data) => {
        this.retrievalList = this.developerList = data;
      });
    },
    getLog(pageinfo) {
      if (pageinfo) {
        this.params.start = pageinfo.start;
      }
      this.logloading = true;
      loadDevelopUserLog(this.params).then((data) => {
        this.totalCount = data.totalCount;
        this.detailList = data.rows;
        this.logloading = false;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
  .page__operationlog {
    background-color: #f0f2f5;
    padding: 20px 0;
    .pointer {
      cursor: pointer;
    }
    .page__content {
      width: 1250px;
      margin: 0 auto;
      background: #ffffff;
      padding: 20px;
      .jepaas-userInfo {
        display: flex;
        box-sizing: border-box;
        padding-left: 10px;
        .left-box {
          flex: 1;
          .info-item {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            font-size: 14px;
            .headerImg {
              width: 50px;
              height: 50px;
              border-radius: 50%;
              overflow: hidden;
              font-size: 0;
              .headername {
                cursor: pointer;
                width: 100%;
                height: 100%;
                line-height: 50px;
                background-color: #efa544;
                text-align: center;
                font-size: 12px;
                color: #fff;
              }
              img {
                width: 100%;
                height: 100%;
              }
            }
            .basicinfo {
              span {
                display: inline-block;
              }
              .name {
                font-size:16px;
                font-weight:600;
              }
              .lightword {
                font-size: 24px;
              }
              .zsnumber {
                margin-left: 20px;
                font-size: 15px;
              }
            }
            .info-machines {
              font-weight: 600;
              padding-right: 10px;
              padding-top: 10px;
            }
          }
          .info-config {
            font-weight: 400;
            padding-bottom: 4px;
            span {
              display: inline-block;
              padding-right: 20px;
              &:last-child {
                padding-right: 0;
              }
            }
          }
          .info-time {
            font-weight: 400;
            color: #A9ABA9;
            font-size: 12px;
            span {
              display: inline-block;
              padding-right: 40px;
              &:last-child {
                padding-right: 0;
              }
            }
          }
        }
        .right-box {
          text-align: right;
          .tips {
            color: #BF1208;
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 60px;

            .shanIcon {
                animation: twinkling 1s infinite ease-in-out
            }
            .animated {
                -webkit-animation-duration: 1s;
                animation-duration: 1s;
                -webkit-animation-fill-mode: both;
                animation-fill-mode: both
            }
            @-webkit-keyframes twinkling {
                0%{
                    opacity: 0;
                }
                100%{
                    opacity: 1;
                }
            }
            @keyframes twinkling {
                0%{
                    opacity: 0;
                }
                100%{
                    opacity: 1;
                }
            }
          }
          .btns {
            .el-button {
              min-width: 120px;
              padding: 13px 15px;
            }
          }
        }
      }
      &:not(:first-child) {
        margin-top: 20px;
      }
      &.pb0 {
        padding-bottom: 0;
      }
      .left {
        float: left;
      }
      .page__image img{
        width: 100%;
      }
      .content_title {
        font-size: 15px;
        color: #525252;
        font-weight: bold;
      }
      .list {
        width: 100%;
        &.entry_list {
         /*  padding: 0 30px; */
          display: flex;
          justify-content: center;
          .entry_items {
            float: left;
            width: 10%;
            position: relative;
            .icon_wrp {
              width: 48px;
              height: 48px;
              margin: 20px auto 5px;
              position: relative;
              border: 1px solid #4094ED;
              background: #4094ED;
              border-color: #4094ED;
              color: #ffffff;
              border-radius: 5px;
              i {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                font-size: 20px;
              }
            }
            p{
              margin: 0;
              padding: 0;
              text-align: center;
            }
            &:not(:first-child) {
              &:before {
                content: ' ';
                position: absolute;
                top: 30px;
                left: 0;
                bottom: 30px;
                background: #f0f2f5;
                width: 1px;
              }
            }
            &:hover {
              .icon_wrp {
                border-color: rgba(64, 148, 237, .3);
                background: rgba(64, 148, 237, .3);
                color: #4094ED;
              }
            }
          }
        }
        &.count_list {
          margin-top: 20px;
          .count_items {
            float: left;
            width: 14.27%;
            padding: 0 30px;
            .item_wrp {
              border-radius: 4px;
              text-align: center;
              height: 60px;
              .count {
                font-size: 24px;
                margin-top: 5px;
                color: #999999;
              }
              .label {
                font-size: 10px;
                color: #525252;
              }
            }
          }
        }
      }
      .dev_oper_dialog {
        > div {
          float: left;
          padding-bottom: 15px;
        }
        .developer {
          width: 20%;
          overflow: hidden;
          .clearBoth {
            .left {
              float: left;
              position: relative;
              &.title {
                width: 200px;
                height: 44px;
                line-height: 44px;
                .user_input {
                  border: 1px solid #D2D2D2;
                  border-radius: 15px;
                  // width: 95%;
                  width: 100%;
                  padding-right: 20px;
                  padding-left: 10px;
                  height: 25px;
                }
                .jeicon-error-circle {
                  position: absolute;
                  right: 10%;
                  top: 1px;
                  font-size: 11px;
                  cursor: pointer;
                }
              }
            }
            .right {
              float: right;
              &.title {
                width: 35px;
                height: 44px;
                line-height: 44px;
              }
            }
            .name {
              height: 36px;
              line-height: 36px;
              float: left;
              margin-left: 10px;
              &.active {
                color: #4094ED;
                font-weight: bold;
              }
            }
          }
          .item_wrps {
            overflow-y: auto;
            width: 260px;
            padding-right: 20px;
            max-height: 500px;
            &.h0 {
              height: 0;
            }
            .dev_items {
              margin-bottom: 10px;
              padding-left: 30px;
            }
          }
        }
        .oper_detail {
          width: 80%;
          border-left: 1px solid #F0F2F5;
          height: 550px;
          position: relative;
          padding-right: 30px;
          .detail_title {
            color: #666666;
            font-size: 14px;
            height: 33px;
            line-height: 35px;
            border-bottom: 1px solid #F0F2F5;
            padding-left: 10px;
          }
          .detail_content {
            padding: 0 10px;
            .detail_items {
              margin-top: 10px;
              > span {
                height: 36px;
                line-height: 36px;
              }
              > span:nth-child(2) {
                width: 5%;
                margin-left: 10px;
              }
              > span:nth-child(3) {
                width: 15%;
              }
              > span:nth-child(3),
              > span:nth-child(4) {
                margin-left: 20px;
              }
              > span:nth-child(4) {
                width: 60%;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              }
            }
          }
          .je-vue-pagebar {
            padding: 0 10px;
            position: absolute;
            right: 0;
            bottom: 0;
            left: 0;
          }
        }
      }
    }
    .clearBoth {
      &:after {
        content: '';
        clear: both;
        display: table;
      }
    }
  }
</style>

<style lang="scss">
  .page__operationlog{
    .el-collapse-item__arrow {
      display: none;
    }
  }
</style>
